<template>
  <view class="content">
    <view class="header" @click="goUserInfo">
      <view class="image_top">
        <img :src="avatar" style="width: 100%; height: 100%;"></img>
      </view>
      <view class="userInfo">
        <view class="title">{{ user.nickName }}</view>
        <view class="phone">
          <view>个人信息</view>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <view v-if="user.postStatus" class="tag" style="background-color: #5ac725;">已认证</view>
        <view v-else class="tag" style="background-color: #f56c6c;">未认证</view>
      </view>
    </view>
    <view class="cell">
      <u-cell v-for="(item, index) in linkList" :key="index" v-if="item.show" :title="item.name" isLink :url="item.url"></u-cell>
      <u-cell title="书记留言" isLink @click="openMessageModal"></u-cell>
    </view>
    <view class="cell">
      <u-cell title="网格员登录" isLink url="/pages/login/index?title=网格员登录" titleStyle="color: #f56c6c"></u-cell>
      <u-cell title="律师登录" isLink url="/pages/login/index?title=律师登录" titleStyle="color: #f56c6c"></u-cell>
    </view>

    <u-modal :show="messageModal.show" title="留言" showCancelButton>
      <view style="width: 100%;">
        <u-form labelPosition="top" :model="messageModal.form" :rules="messageModal.rules" ref="messageForm">
          <u-form-item prop="reason">
            <u-textarea v-model="messageModal.form.content" placeholder="请输入留言内容" />
          </u-form-item>
        </u-form>
      </view>
      <template #confirmButton>
        <view class="message-foot">
          <view class="btn">
            <u-button text="取消" @click="messageModal.show = false"></u-button>
          </view>
          <view class="btn" style="margin-left: 10rpx;">
            <u-button type="primary" text="发送" @click="onSend"></u-button>
          </view>
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import authApi from '../../request/api/auth'
import commentApi from '../../request/api/comment'
import config from '../../request/config'

export default {
  data() {
    return {
      // 书记用户id
      sjId: null,
      messageModal: {
        show: false,
        form: {
          content: ''
        },
        rules: {
          content: [{ required: true, message: '请输入', trigger: ['blur'] }],
        }
      }
    }
  },
  onShow() {
    this.$store.dispatch('userInfo/GetInfo')
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isGridWorker', 'isCommon', 'isMerchant', 'isLawyer', 'isNightMarketAdministrator']),
    linkList() {
      return [
        { name: '我的房源', url: `/house/list?userId=${ this.user.userId }`, show: this.isCommon },
        // { name: '我的招聘', url: `/recruitment/list?userId=${ this.user.userId }`, show: true },
        // { name: '我的求职', url: `/work/list?userId=${ this.user.userId }`, show: true },
        { name: '我的美食', url: `/food/list?userId=${ this.user.userId }`, show: this.isNightMarketAdministrator },
        { name: '我的资讯', url: `/information/list?userId=${ this.user.userId }`, show: this.isCommon },
        { name: '我的建议留言', url: `/pages/common/myList`, show: this.isCommon },
        { name: '我的用印申请', url: `/sealApply/list`, show: this.isCommon }
      ]
    },
    avatar() {
      const avatar = this.user.avatar
      return avatar ? config.baseUrl + avatar : 'https://sanshengcai.com/home/images/logo.png'
    }
  },
  methods: {
    goUserInfo() {
      uni.navigateTo({
        url: `/pages/userInfo/index`
      });
    },
    // 打开留言弹窗
    async openMessageModal() {
      if (this.sjId) return
      uni.showLoading({
        title: '加载中'
      });
      try {
        // 获取书记id
        var { rows, total } = await authApi.getUserList({
          pageNum: 1,
          pageSize: 1,
          userName: 'sj',
        })
      } finally {
        uni.hideLoading()
      }
      if (!total) return uni.showToast({
        title: '书记不存在',
        icon: 'none'
      })
      this.sjId = rows[0].userId
      this.messageModal.show = true
    },
    // 给书记留言
    async onSend() {
      uni.showLoading({
        title: '加载中'
      });
      try {
        await commentApi.sendUser({
          leaderUserId: this.sjId,
          userId: this.user.userId
        })
      } finally {
        uni.hideLoading()
      }
      uni.showToast({
        icon: 'success',
        title: '留言成功',
      })
      this.messageModal.show = false
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f8f9fa;

  .header {
    background-color: #fff;
    height: 200rpx;
    display: flex;
    padding: 80rpx 20rpx 0 60rpx;
  }

  .image_top {
    border-radius: 10rpx;
    overflow: hidden;
    width: 100rpx;
    height: 100rpx;
  }

  .cell {
    margin-top: 20rpx;
    background-color: #fff;
  }

  .userInfo {
    flex: 1;
    margin-left: 40rpx;

    .title {
      font-weight: 600;
      color: #333232;
      margin-bottom: 10rpx;
    }

    .phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: #363535;
      margin-bottom: 13rpx;
    }

    .tag {
      display: inline-block;
      padding: 2rpx 10rpx;
      text-align: center;
      line-height: 30rpx;
      height: 30rpx;
      border-radius: 18rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }
}

.message-foot {
  display: flex;
  .btn {
    flex: 1;
  }
}
</style>
